<template>
  <!-- 售后订单 打款给买家 -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      class="search-form-new"
      label-width="90px"
    >
     
      <el-form-item label="店铺" prop="status" v-hasPermi="['searchTenantID']">
        <el-select
          v-model="queryParams.tenantId"
          placeholder="请选择店铺"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="dict in tenantList"
            :key="dict.tenantId"
            :label="dict.tenantName"
            :value="dict.tenantId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品编号" prop="goodsId">
        <el-input
          v-model="queryParams.goodsId"
          placeholder="请输入商品编号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="游戏账号" prop="realAccountNumber">
        <el-input
          v-model="queryParams.realAccountNumber"
          placeholder="请输入游戏账号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="打款状态" prop="">
        <el-select
          v-model="queryParams.remitState"
          placeholder="请选择打款状态"
          size="small"
          clearable
        >
          <el-option
            v-for="(dict, key) in commonMaps.afterOrderPayStateTenant"
            :key="key"
            :label="dict"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="买家结算状态" prop="">
      <el-select
          v-model="queryParams.saleSettlementState"
          placeholder="请选择结算状态"
          size="small"
          clearable
        >
          <el-option
            v-for="(dict, key) in commonMaps.afterOrderPayStateTenant"
            :key="key"
            :label="dict.label"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="卖家结算状态" prop="">
      <el-select
          v-model="queryParams.supplySettlementState"
          placeholder="请选择结算状态"
          size="small"
          clearable
        >
          <el-option
            v-for="(dict, key) in commonMaps.sellerPayState"
            :key="key"
            :label="dict.label"
            :value="key"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="售后订单号" prop="no">
        <el-input
          v-model="queryParams.no"
          placeholder="请输入售后订单号"
          clearable
          size="small"
        />
      </el-form-item>
  
      <el-form-item class="btns">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getList"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          type="warning"
          @click="resetQuery"
          >重置</el-button
        >
     
      </el-form-item>
    </el-form>
    <div class="table_box">
    
          <el-table
            :data="tableData.records"
            style="width: 100%"
            stripe
          >
            <el-table-column
              prop="no"
              label="售后单号"
              min-width="120"
            ></el-table-column>
            <el-table-column prop="goodsId" label="商品编号" min-width="80">
            </el-table-column>
            <el-table-column prop="realAccountNumber" label="游戏账号" min-width="120">
            <template slot-scope="scope">
              <span>{{scope.row.realAccountNumber||scope.row.accountNumber}}</span
                >
            </template>
          </el-table-column>
            <el-table-column
              prop="actualAmount"
              label="实付金额"
              min-width="80"
            ></el-table-column>
            <el-table-column
              prop="afterAmount"
              label="退款金额"
              min-width="80"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="申请时间"
              min-width="160"
            ></el-table-column>
            <el-table-column prop="" label="售后状态" min-width="80">
              <template slot-scope="scope">
                <span>{{
                  commonMaps.afterOrderStateMap[scope.row.status] || commonMaps.afterOrderStateMap["3"]
                }}</span
                ><br />
      
              </template>
            </el-table-column>
            <el-table-column prop="" label="打款状态" min-width="100">
              <template slot-scope="scope">
            

                <el-tag type="success" v-if="scope.row.remitState==2">已打款</el-tag>
                <el-tag type="warning" v-if="scope.row.remitState==1">未打款</el-tag>
      
              </template>
            </el-table-column>
            <!-- <el-table-column prop="" label="卖家结算状态" min-width="100">
              <template slot-scope="scope">
                <span>{{
                  commonMaps.sellerPayState[scope.row.supplySettlementState].label || commonMaps.sellerPayState["1"].label
                }}</span
                ><br />
      
              </template>
            </el-table-column> -->
         
            <el-table-column fixed="right" label="操作" min-width="150">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="openOrder(scope.row.id,'buyer')"
                  v-if="scope.row.remitState==1&&checkPermi(['afterOrderForTenant:afterOrderPay'])"
                  >打款</el-button>
                  <el-button
                  type="text"
                  size="small"
                  @click="viewOrder(scope.row)"
                  v-if="scope.row.remitState==2&&checkPermi(['afterOrderForTenant:afterOrderView'])"
                  >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
              @pagination="getList" />
    </div>
    <!-- <div class="pages-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      ></el-pagination>
    </div> -->
    <afterSellDone ref="afterSellDone"></afterSellDone>
    <afterSellView ref="afterSellView"></afterSellView>
   
  </div>
</template>

<script>
import orderAfterApi from '@/api/pickUp/afterSale.js'
import afterSellDone from './components/afterOrderSettlementDialog.vue'
import afterSellView from './components/afterSellView.vue'
export default {
  name: "saleAfterSettle",
  components: {
    afterSellDone,afterSellView
  },
  data() {
    return {
      tableData: {
        records: [],
        total: 0,
      },
      btnLoading: false,
      loading: false,
      actived: "3",
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        status: 1,
        saleChanelId: null,
        supplyChanelId: "",
        no:'',
        dataType: "sell",
      },
      copyVlaue: "",
      retailDomainList: [],
      IMhost: "",
    };
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList
    },
     shopInfo() {
      return this.$store.getters.shopInfo;
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      // queryParams 请求列表
      this.loading = true;
      // if (this.timer && this.timer.length == 2) {
      //   this.queryParams.applicantTimeStart = this.timer[0] + " 00:00:00";
      //   this.queryParams.applicantTimeEnd = this.timer[1] + " 23:59:59";
      // } else {
      //   this.queryParams.applicantTimeStart = "";
      //   this.queryParams.applicantTimeEnd = "";
      // }
      orderAfterApi.saleOrderAfterList(this.queryParams).then((res) => {
        this.loading = false;
        this.tableData.records = res.rows;
        this.tableData.total = res.total;
      });
    },
    // 打开处理售后的弹窗
    openOrder(id,from){
      // //console.log("%c Line:271 🍉 from", "color:#b03734", from);
      this.$refs.afterSellDone.open(id,from)
    },
    // 打开查看售后的弹窗
    viewOrder(row){
      this.$refs.afterSellView.open(row.id)
    },
   
   
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        status: 1,
        saleChanelId: null,
        supplyChanelId: "",
        no:'',
        dataType: "sell",
      };
      this.getList();
    },
  
    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    exportOrder() {},
  },
};
</script>
<style lang="scss" scoped>
.link {
  color: blue;
  cursor: pointer;
}
</style>
